---
layout: page
title: Patterns
description: An accessible widget & pattern library
---

<section class="toc-wrap toc-long">
  <h3 class="toc-title">Categories</h3>
  <ul class="toc">
      <li><a class="menus" href="#menus">Menus</a></li>
      <li><a class="imagery" href="#imagery">Imagery</a></li>
      <li><a class="accordions-and-tabs" href="#accordions-and-tabs">Accordions/Tabs</a></li>
      <li><a class="buttons" href="#buttons">Buttons</a></li>
      <li><a class="anchors" href="#anchors">Anchors</a></li>
      <li><a class="modals" href="#modals">Modal Windows</a></li>
      <li><a class="tables" href="#tables">Tables</a></li>
      <li><a class="tooltips" href="#tooltips">Tooltips</a></li>
      <li><a class="labelling" href="#labelling">Labelling</a></li>
      <li><a class="videos" href="#videos">Videos</a></li>
      <li><a class="other" href="#other">Other</a></li>
  </ul>
</section>

<!-- WAI-ARIA Design Pattern Examples -->
<!-- http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224 -->
<section id="menus" class="article-section patterns-section" tabindex="0">
  <h3 class="article-section__title">Menus</h3>
  <ul class="article-section__content">
    <li><a href="http://codepen.io/grayghostvisuals/pen/d7d131e58a33665d24ea0881c01a02b8" rel="external">Dropdown</a></li>
    <li><a href="http://adobe-accessibility.github.io/Accessible-Mega-Menu">Mega Dropdown</a></li>
    <li><a href="http://codepen.io/svinkle/pen/LDKwA">Mobile Toggle</a></li>
    <li><a href="http://codepen.io/grayghostvisuals/pen/IkmGF">Off Canvas Push</a></li>
  </ul>
</section>

<section id="imagery" class="article-section patterns-section" tabindex="0">
  <h3 class="article-section__title">Imagery</h3>
  <ul class="article-section__content">
    <li><a href="http://codepen.io/grayghostvisuals/pen/eyvrK">SVG</a></li>
    <li><a href="http://codepen.io/mpiotrowicz/pen/yndxA">Video Element Backgrounds</a></li>
  </ul>
</section>

<section id="accordions-and-tabs" class="article-section patterns-section" tabindex="0">
  <h3 class="article-section__title">Accordions &amp; Tabs</h3>
  <ul class="article-section__content">
    <li><a href="http://codepen.io/svinkle/pen/mKfru">Simple Accordion</a></li>
    <li><a href="http://codepen.io/svinkle/pen/edmDF">Simple Tabs</a></li>
    <li><a href="http://codepen.io/mpiotrowicz/pen/gocmu" rel="external">Responsive Tabs to Accordion</a></li>
    <li><a href="http://codepen.io/BeyondHyper/pen/xZXXzj">Simple Responsive Tabs (Vanilla JS)</a></li>
  </ul>
</section>

<section id="buttons" class="article-section patterns-section" tabindex="0">
  <h3 class="article-section__title">Buttons</h3>
  <ul class="article-section__content">
    <li><a href="http://codepen.io/grayghostvisuals/pen/HhiAz">Form Submission</a></li>
    <li><a href="http://codepen.io/svinkle/pen/FHGBh">Single Toggle (anchor)</a></li>
  </ul>
</section>

<section id="anchors" class="article-section patterns-section" tabindex="0">
  <h3 class="article-section__title">Anchors/Links</h3>
  <ul class="article-section__content">
    <li>Read More Links:
      <ul>
        <li><a href="http://codepen.io/svinkle/pen/Jmlbw">hidden &lt;span&gt;</a>
        <li><a href="http://codepen.io/grayghostvisuals/pen/Gtoua">aria-labelledby</a></li>
        <li><a href="http://codepen.io/joe-watkins/pen/xaDbJ">aria-label</a></li>
      </ul>
    </li>
    <li><a href="http://codepen.io/joe-watkins/pen/rjhiK">Skip To Content</a></li>
  </ul>
</section>

<section id="modals" class="article-section patterns-section" tabindex="0">
  <h3 class="article-section__title">Modal Windows</h3>
  <ul class="article-section__content">
    <li><a href="http://accessibility.oit.ncsu.edu/training/aria/modal-window/version-3/" rel="external">The Incredible Accessible Modal Window, Version 3</a></li>
    <li><a href="http://codepen.io/scottohara/pen/lIdfv" rel="external">An accessible Modal Window with JavaScript & CSS</a></li>
  </ul>
</section>

<section id="tables" class="article-section patterns-section" tabindex="0">
  <h3 class="article-section__title">Tables</h3>
  <ul class="article-section__content">
    <li><a href="http://codepen.io/svinkle/pen/zmlEi">Simple Data Table</a></li>
  </ul>
</section>

<section id="tooltips" class="article-section patterns-section" tabindex="0">
  <h3 class="article-section__title">Tooltips</h3>
  <ul class="article-section__content">
    <li><a href="http://codepen.io/mpiotrowicz/pen/PwQYMd" rel="external">Form field with icon-based tooltip for extra field information</a></li>
  </ul>
</section>

<section id="labelling" class="article-section patterns-section" tabindex="0">
    <h3 class="article-section__title">Labelling</h3>
    <ul class="article-section__content">
        <li><a href="http://codepen.io/svinkle/pen/eNPyEB">Using aria-labelledby with Lists</a></li>
    </ul>
</section>

<section id="videos" class="article-section patterns-section" tabindex="0">
  <h3 class="article-section__title">Video Players</h3>
  <ul class="article-section__content">
    <li><a href="https://github.com/ableplayer/ableplayer">Able Player</a></li>
    <li><a href="http://github.com/paypal/accessible-html5-video-player/">Accessible HTML5 Video Player</a></li>
  </ul>
</section>

<section id="other" class="article-section patterns-section" tabindex="0">
    <h3 class="article-section__title">Other</h3>
    <ul class="article-section__content">
        <li><a href="http://codepen.io/svinkle/pen/yDAiG">Content Touch Target</a></li>
    </ul>
</section>
